<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.banner {
			width: 500px;
			height: 300px;
			margin: 100px auto;
			border: 1px solid #c00;
			position: relative;
		}
		.pic {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		img {
			width: 100%;
			height: 100%;
		}
		.btn {
			width: 30px;
			height: 50px;
			background-color: #c00;
			position: absolute;
			top: calc(50% - 25px);
			line-height: 50px;
			text-align: center;
			cursor: pointer;
			font-size: 20px;
			user-select:none;
		}
		.right	{
			right: 0;
		}
		.on {
			display: block;
		}
		p {
			width: 100%;
			height: 30px;
			background-color: #fff;
			position: absolute;
			z-index: 2;
			left: 0;
			line-height: 30px;
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			background-color: rgba(0,0,0,0.3);
			color: #fff;
			user-select:none;
		}
		p.bottom {
			bottom: 0;
		}
		.control {
			width: 100%;
			position: absolute;
			top: -42px;
			left: 0;
		}
		.control > div {
			width: 80px;
			height: 40px;
			float: left;
			line-height: 40px;
			text-align: center;
			background-color: #ccc;
			cursor: pointer;
			user-select:none;
			border:1px solid #f00;
		}
		.control .active {
			background-color: #f00;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="banner">
		<div class="pic on">
			<img src="images/pic1.jpg" alt="">
		</div>
		<div class="pic">
			<img src="images/pic2.jpg" alt="">
		</div>
		<div class="pic">
			<img src="images/pic3.jpg" alt="">
		</div>
		<div class="pic">
			<img src="images/pic4.jpg" alt="">
		</div>
		<div class="pic">
			<img src="images/pic5.jpg" alt="">
		</div>
		<div class="btn left"><</div>
		<div class="btn right">></div>
		<p class="top"><span class="txt">1</span>/5</p>
		<p class="bottom">A</p>
		<div class="control">
			<div class="controlR active">循环轮播</div>
			<div class="controlR">单边轮播</div>
		</div>
	</div>
	<script>
	var ocontrol = document.getElementsByClassName('controlR'),
		obtn = document.getElementsByClassName('btn'),
		opic = document.getElementsByClassName('pic'),
		txt = document.getElementsByClassName('txt')[0],
		bottom = document.getElementsByClassName('bottom')[0],
		index = 0,
		mark = true,
		arr = ['A','B','C','D','E'];
		// 点击循环播放按钮
		ocontrol[0].onclick = function(){
			this.className = 'controlR active';
			ocontrol[1].className = 'controlR';
			mark = true;
		}
		//点击单边播放按钮
		ocontrol[1].onclick = function(){
			this.className = 'controlR active';
			ocontrol[0].className = 'controlR';
			mark = false;
		}
		// 点击右边的按钮
		obtn[1].onclick = function(){
			opic[index].className = ('pic');
			index++;
			if (mark){
				if (index>4) {
				index = 0;
				}
			}else{
				if (index>4) {
				index = 4;
				alert('请别在点击，已经达到了奔溃~');
				}
			}
			opic[index].className = ('pic on');
			bottom.innerHTML = arr[index];
			txt.innerHTML = index+1;
		}
		// 点击左边的按钮
		obtn[0].onclick = function(){
			opic[index].className = ('pic');
			index--;
			if(mark){
				if(index<0){
				index = 4;
				}
			}else{
				if (index<0) {
				index = 0;
				alert('请别在点击，已经达到了奔溃~');
				}
			}
			opic[index].className = ('pic on');
			bottom.innerHTML = arr[index];
			txt.innerHTML = index+1;
		}
	</script>
</body>
</html>